<!-- RegisterDialog.vue -->
<script setup>
import { defineProps, defineEmits, computed } from 'vue';
import Register from './Register.vue';

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  }
});

const emit = defineEmits(['update:modelValue', 'close']);

const internalVisible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

const handleClose = () => {
  internalVisible.value = false;
  emit('close');
};
</script>

<style scoped>
.register-dialog {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.el-dialog {
  width: 30%;
  max-width: 400px;
  /* 设置最大宽度以适应不同屏幕 */
  min-width: 300px;
  /* 设置最小宽度以适应不同屏幕 */
  margin: 0 auto;
  /* 水平居中 */
  background-color: #fff;
  /* 设置对话框背景颜色 */
  border-radius: 8px;
  /* 设置圆角 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* 设置阴影 */
}

.el-dialog__header {
  padding: 20px;
  background-color: #f4f4f4;
  /* 设置头部背景颜色 */
  border-bottom: 1px solid #ddd;
  /* 设置底部边框 */
}

.el-dialog__body {
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
</style>